Skip to content

HACK week: Add new tab icons - #22197

Closed
momo-ozawa wants to merge 7 commits into
trunkfrom
task/new-tab-icons
Closed

HACK week: Add new tab icons#22197
momo-ozawa wants to merge 7 commits into
trunkfrom
task/new-tab-icons

Conversation

@momo-ozawa

@momo-ozawa momo-ozawa commented Dec 8, 2023

Copy link
Copy Markdown
Contributor

Description

  • Adds new tab icons (Design ref: eYeHXEMDbnFptE40xUqZ2T-fi-1862%3A3175)
  • Controlled by a local feature flag "New Tab Icons"

How to test

  • Verify new tab icons adapt to environment (light vs dark)
  • Verify notification icon shows the correct badge color when there are unread notifications (blue for WP, green for JP)
  • Verify you can toggle the "New Tab Icons" feature flag
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2023-12-08.at.09.23.41.mp4

Regression Notes

  1. Potential unintended areas of impact
    n/a

  2. What I did to test those areas of impact (or what existing automated tests I relied on)
    n/a

  3. What automated tests I added (or what prevented me from doing so)
    n/a

PR submission checklist:

  • I have completed the Regression Notes.
  • I have considered adding unit tests for my changes.
  • I have considered adding accessibility improvements for my changes.
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

  • Portrait and landscape orientations.
  • Light and dark modes.
  • Fonts: Larger, smaller and bold text.
  • High contrast.
  • VoiceOver.
  • Languages with large words or with letters/accents not frequently used in English.
  • Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
  • iPhone and iPad.
  • Multi-tasking: Split view and Slide over. (iPad)

@momo-ozawa momo-ozawa added this to the 23.9 ❄️ milestone Dec 8, 2023
@wpmobilebot

wpmobilebot commented Dec 8, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor
WordPress Alpha📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.
App NameWordPress Alpha WordPress Alpha
ConfigurationRelease-Alpha
Build Numberpr22197-cf91ff8
Version23.8
Bundle IDorg.wordpress.alpha
Commitcf91ff8
App Center BuildWPiOS - One-Offs #8109
 Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@wpmobilebot

wpmobilebot commented Dec 8, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor
Jetpack Alpha📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.
App NameJetpack Alpha Jetpack Alpha
ConfigurationRelease-Alpha
Build Numberpr22197-cf91ff8
Version23.8
Bundle IDcom.jetpack.alpha
Commitcf91ff8
App Center Buildjetpack-installable-builds #7129
 Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

osullivanchris
osullivanchris suggested changes Dec 8, 2023
View reviewed changes

@osullivanchris osullivanchris left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great to play with a build! cool stuff. Some questions/ideas (happy to discuss on slack too):

  • Can we hide the tab bar by default on scroll on all views?
  • Is the tab bar still using a flat 100% white color? Can we bring back the native blur and transparency?
  • The unselected icons are a little lighter than I expected. Is there any alpha being applied in code? I already have an alpha in the asset.
  • WDYT about using the icon for me rather than person's avatar? I'm split. The avatar is more clear. But it also puts the most visual emphasis on this tab, when its the least important one. Want to try the 'Me' assets I gave?

@mokagio mokagio modified the milestones: 23.9, 24.0 Dec 10, 2023
@mokagio

mokagio commented Dec 10, 2023

Copy link
Copy Markdown
Contributor

Moving this to 24.0 as I'll run the 23.9 code freeze and this has not been approved yet.

@momo-ozawa

momo-ozawa commented Dec 11, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@osullivanchris

Can we hide the tab bar by default on scroll on all views?

I'm not sure if we should be hiding the tab bar on scroll. Apple doesn't provide any nice APIs for animating hiding/showing the tab bar.

Is the tab bar still using a flat 100% white color? Can we bring back the native blur and transparency?

Done! f1287b9

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2023-12-11.at.10.59.04.mp4

The unselected icons are a little lighter than I expected. Is there any alpha being applied in code? I already have an alpha in the asset.

AFAICT there's no alpha being applied via code. Can you provide an icon that has 100% alpha (solid color) to see if that makes a difference? Just one icon is okay for now, so I can figure out whether the built-in alpha is causing issues.

WDYT about using the icon for me rather than person's avatar? I'm split. The avatar is more clear. But it also puts the most visual emphasis on this tab, when its the least important one. Want to try the 'Me' assets I gave?

Right now the new icon is used as a placeholder image - it's displayed if the user hasn't set a profile icon. I wasn't sure if I should completely replace the me tab icon, or just update the placeholder image, since we recently re-worked the me tab profile icon.

I can change it to always show the static icon instead. Does this mean that we should also change the profile icon shown in the menu for the simplified WP UI (see: screenshot)?

@osullivanchris

osullivanchris commented Dec 11, 2023

Copy link
Copy Markdown

I'm not sure if we should be hiding the tab bar on scroll. Apple doesn't provide any nice APIs for animating hiding/showing the tab bar.

Ok sure. Might be something to consider on a case by case basis instead. Relevant in Reader for example. Maybe not everywhere.

Done

Transparency looks good. Are there choices of materials/transparencies or one default provided? Do you like how it looks now? Same question for @kean

AFAICT there's no alpha being applied via code. Can you provide an icon that has 100% alpha (solid color) to see if that makes a difference? Just one icon is okay for now, so I can figure out whether the built-in alpha is causing issues.

Attached below

Right now the new icon is used as a placeholder image - it's displayed if the user hasn't set a profile icon. I wasn't sure if I should completely replace the me tab icon, or just update the placeholder image, since we recently re-worked the me tab profile icon.

Leave this with me as an open question, along with the new reader icon. I need to get some answers from the design team. Will get them this week.

tab bar non transparent.zip

Momo Ozawa
replace unselected icon assets
cf91ff8 
images need to be opaque (i.e. 100% opacity)
@wpmobilebot

wpmobilebot commented Dec 12, 2023

Copy link
Copy Markdown
Contributor
1 Warning
⚠️ This PR is larger than 500 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.

Generated by 🚫 Danger

@momo-ozawa

momo-ozawa commented Dec 12, 2023

Copy link
Copy Markdown
Contributor Author

@osullivanchris Thanks for reviewing!

Might be something to consider on a case by case basis instead. Relevant in Reader for example. Maybe not everywhere.

Ok - will keep this in mind

Transparency looks good. Are there choices of materials/transparencies or one default provided? Do you like how it looks now? Same question for @kean

It's the default transparency. Personally I think it looks good!

Attached below

Thanks! The opaque images worked like a charm!

Leave this with me as an open question, along with the new reader icon. I need to get some answers from the design team. Will get them this week.

Sounds good - thanks!

@momo-ozawa

momo-ozawa commented Jan 3, 2024

Copy link
Copy Markdown
Contributor Author

Closing this in favor of #22325

@momo-ozawa momo-ozawa closed this Jan 3, 2024
@jkmassel
jkmassel deleted the task/new-tab-icons branch July 26, 2024 18:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@osullivanchris osullivanchris osullivanchris requested changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

[Type] Task

Projects

None yet

Milestone

24.0

Development

Successfully merging this pull request may close these issues.

4 participants

@momo-ozawa @wpmobilebot @mokagio @osullivanchris